.offcanvas-mask{
  position: fixed;
  top:0;
  left:0;
  
  &::before{
    content:'';
    display: block;
    position: fixed;
    left:0;
    right:0;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,.3);
    z-index: 1;
  }

  .offcanvas{
    position: fixed;
    right:0;
    display: flex;
    background-color: #fff;
    box-shadow: #ccc 0 0 35px;
    padding:30px 20px;
    flex-direction: column;
    z-index:4;
    height:100%;
    overflow-y: scroll;

    .offcanvas-header{
      height:100px;
      width:100%;
    }
  
    .offcanvas-body{
      flex:1
    }
  
    .close--offcanvas{
      position: absolute;
      right: 20px;
      top:15px;
    }
  }
}
